<template>
  <!-- 导航栏 -->
    <van-nav-bar title="豆瓣" />
  <!-- 搜索 -->
  <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
  <!-- 渲染 -->
   <div class="xr">
    <dl v-for="item in xr" @click="goxq">
        <dt>
            <img :src="item.src" alt="">
        </dt>
        <dd>
            <p><h2>{{ item.t1 }}</h2></p>
            <p>{{ item.t2 }}</p>
            <p class="ys1">{{ item.t3 }}</p>
        </dd>
    </dl>
   </div>
</template>

<script setup>
import { ref } from 'vue'
let xr = ([
    {src:'/src/img/1.png',t1:'彗星来的那一夜(2013)',t2:'2013/美国 英国 /科幻 悬疑 惊悚 / 詹姆斯.奥德...',t3:'喜欢《头号玩家》的人也喜欢'},
    {src:'/src/img/2.png',t1:'彗星来的那一夜(2013)',t2:'2013/美国 英国 /科幻 悬疑 惊悚 / 詹姆斯.奥德...',t3:'喜欢《头号玩家》的人也喜欢'},
    {src:'/src/img/3.png',t1:'彗星来的那一夜(2013)',t2:'2013/美国 英国 /科幻 悬疑 惊悚 / 詹姆斯.奥德...',t3:'喜欢《头号玩家》的人也喜欢'},
    {src:'/src/img/1.png',t1:'彗星来的那一夜(2013)',t2:'2013/美国 英国 /科幻 悬疑 惊悚 / 詹姆斯.奥德...',t3:'喜欢《头号玩家》的人也喜欢'},
    {src:'/src/img/2.png',t1:'彗星来的那一夜(2013)',t2:'2013/美国 英国 /科幻 悬疑 惊悚 / 詹姆斯.奥德...',t3:'喜欢《头号玩家》的人也喜欢'},
    {src:'/src/img/3.png',t1:'彗星来的那一夜(2013)',t2:'2013/美国 英国 /科幻 悬疑 惊悚 / 詹姆斯.奥德...',t3:'喜欢《头号玩家》的人也喜欢'},
    {src:'/src/img/1.png',t1:'彗星来的那一夜(2013)',t2:'2013/美国 英国 /科幻 悬疑 惊悚 / 詹姆斯.奥德...',t3:'喜欢《头号玩家》的人也喜欢'},
    {src:'/src/img/2.png',t1:'彗星来的那一夜(2013)',t2:'2013/美国 英国 /科幻 悬疑 惊悚 / 詹姆斯.奥德...',t3:'喜欢《头号玩家》的人也喜欢'},
    {src:'/src/img/3.png',t1:'彗星来的那一夜(2013)',t2:'2013/美国 英国 /科幻 悬疑 惊悚 / 詹姆斯.奥德...',t3:'喜欢《头号玩家》的人也喜欢'},
])
// 跳转
import { useRouter } from 'vue-router'
let router = new useRouter();
// 点击跳转到详情页
const goxq = () =>{
    router.push('/xq')
}
</script>

<style>
dl{
    width: 100%;
    height: 130px;
}
dl dt{
    width: 80px;
    float: left;
    margin-top: 30px;
    margin-left: 5px;
}
dl dd{
    width: 250px;
    float: left;
}
.ys1{
    color: #ccc;
}
</style>